<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 查询所有作品
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<!-- <div class="handle-box">
				<el-select v-model="query.address" placeholder="精选作品过滤" class="handle-select mr10">
					<el-option key="1" label="精选作品" value="3"></el-option>
					<el-option key="1" label="正在申请精选作品" value="2"></el-option>
					<el-option key="2" label="非精选作品" value="1"></el-option>
				</el-select>
				<el-input v-model="query.name" placeholder="作品名" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			</div> -->
			
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
			 @selection-change="handleSelectionChange">
				
				<el-table-column label="书籍id" prop="bookId">
				</el-table-column>
				<el-table-column label="书籍封面(查看大图)" align="center">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="bookName" label="书籍名称"></el-table-column>
				<el-table-column prop="description" label="书籍简介"></el-table-column>
				<el-table-column prop="penName" label="作者名"></el-table-column>
				<el-table-column prop="categoryName" label="分类"></el-table-column>
				<el-table-column prop="status" label="状态"></el-table-column>
				<el-table-column prop="count" label="总更新字数"></el-table-column>
				<el-table-column prop="countDay" label="连更天数"></el-table-column>
				<el-table-column prop="createTime" label="创建书籍时间"></el-table-column>
				<el-table-column prop="updateTime" label="最后更新时间"></el-table-column>
				<el-table-column prop="flag" label="标记"></el-table-column>

				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">作品封禁</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
				 :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		name: 'basetable',
		data() {
			return {
				query: {
					address: '',
					name: '',
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				pageTotal: 0,
				form: {},
				idx: -1,
				id: -1
			};
		},
		created() {
			this.getData();
		},
		methods: {
			getData: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/manager/allbook",
					type: "get",
					success: function(data) {
						_this.tableData = data.data;
						// console.log(_this.tableData[0].flag);				
						// if(_this.tableData[0].flag==3){
						// 	_this.tableData[0].flag== "已申精";
						// }
					}
				});
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageIndex', 1);
				this.getData();
			},
			// 禁书操作
			handleDelete(index, row) {
				console.log(row.bookId);
				$.ajax({
					url: "http://localhost/manager/"+row.bookId,
					type: "post",
					success: function(data) {
						alert(data.data);
					}
				});
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			}
		},

	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
